<template>
  <section id="page-login">
    <header class="header">
      <img
        class="logo"
        src="../assets/images/about_03.jpg" alt="">
    </header>
    <section class="container">
      <h2 class="title">金算盘官网管理后台</h2>
      <el-form
        size="large"
        ref="form" :model="form" label-width="80px">
        <el-form-item
          label="账号："
          :rules="[{required: true, message: '请输入账号'}]"
        >
          <el-input v-model="form.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item
          label="密码："
          :rules="[{required: true, message: '请输入密码'}]"
        >
          <el-input
            v-model="form.passwd"
            type="password"
            placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item
          label=" "
        >
          <el-button
            size="large"
            @click="login"
            :disabled="disabled"
            :loading="loading"
            type="primary">
            登 录
          </el-button>
        </el-form-item>
      </el-form>
    </section>
    <copyright></copyright>
  </section>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-13
   * @Project: eabax
   */
  import copyright from '../components/copyright'
  import '../assets/less/login.less'

  export default {
    name: 'login',
    data() {
      return {
        form: {
          account: '',
          passwd: ''
        },
        loading: false
      }
    },
    computed: {
      disabled() {
        let form = this.form
        return !form.account || !form.passwd
      }
    },
    methods: {
      login() {
        let form = this.form
        this.loading = true
        this.$axios
          .$get('/api/v1/token/admin', {
            params: form
          })
          .then((res) => {
            this.loading = false
            sessionStorage.setItem('username', res.username)
            sessionStorage.setItem('token', res.token)
            this.$router.push({
              path: '/cms'
            })
            this.$message({
              message: '登录成功',
              type: 'success'
            })
          })
          .catch(res => {
            this.loading = false
            let err_msg = '登录失败' + (res.msg ? '：' + res.msg : '')
            this.$message({
              message: err_msg,
              type: 'error'
            })
          })
      }
    },
    components: {
      copyright
    }
  }
</script>

<style scoped>

</style>
